.swapperWrapper{

    margin: 0 auto;

    width: 1300px;
    height: 460px;
    background-color: antiquewhite;
    position: relative;
    /*轮播图 */
    .swiper{
        width: 100%;
        height: 100%;
        background-color: rgb(122, 122, 121);
        position: relative;

        img{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            /* display: none; */
        }

        img:nth-child(1){
            /* display: block; */
            opacity: 1;
        }





        /* 逗点选择 */
        .dots{
            width: 100px;
            height: 20px;
            position: absolute;
            right: 20px;
            bottom: 10px;
            /* border: solid 1px red; */
            display: flex;
            justify-content: space-between;

            .dot{
                width: 12px;
                height: 12px;
                border-radius: 6px;
                background-color: #404040;
                border: solid 2px #969393;
                cursor: pointer;
            }
            /* 选中的时候  */
            .active ,    .dot:hover{
                background-color: #ccc8c8;
             }
        }


        /* 向左，向右切换 */
        .direction{
            width: 50px;
            height: 80px;
            /* border: solid 1px white; */
            position: absolute;
            color: white;
            font-size: 30px;
            text-align: center;
            line-height: 80px;
            cursor: pointer;
        }

        .dleft{
             left:270px ;
            top: 190px;
        }

         .dright{
            right:0px ;
            top: 190px;
        }
        .direction:hover{
            background-color: #969393;
            font-weight: 900;
        }

    }



    /* 产品分类 */
     .productCateList{
        position: absolute;
        left: 0;
        top: 0;
        width: 270px;
        height: 100%;
        /* border: solid 1px grey; */
        /* background-color: blue; */
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background-color: rgba(49, 49, 49, 0.26);
        .item{
            height: 35px;
            /* background-color: azure; */
            display: flex;
            cursor: pointer;
            .title{
                font-size: 14px;
                color: #FFF;
                flex: 1;
                padding-left: 30px;
                 line-height: 35px;
            }

            .arrow{
                font-size: 18px;
                color: #FFF;
                width: 50px; 
                text-align: center;
                line-height: 35px;
            }
        
        }
        .item:hover{
            background-color: orange;
        }


        .productListDetails{
            position: absolute;
            display: none;
            top: 0;
            left: 270px;
            width: 600px;
            height: 458px;
            background-color: white;
            box-shadow: 0 0 10px grey;
        }
    }


}